<template>
  <div class="detail-detail">
    <div class="detail-type">
      <div class="detail-type-title"><div class="detail-type-title-left"></div>饲养类型:</div>
      <div class="detail-type-con" v-for="(item, index) in data.feedingTypes" :key="index">{{item.feedingTypeName}}</div>
    </div>
    <div class="detail-type-title-two"><div class="detail-type-title-left"></div>饲养生物:</div>
    <div class="detail-type">
      <div class="detail-type-con" v-for="(item, index) in data.biologies" :key="index">{{item.biologyName}}</div>
    </div>
    <div class="detail-type-title-two"><div class="detail-type-title-left"></div>鱼缸材质:</div>
    <div class="detail-type">
      <div class="detail-type-con" v-for="(item, index) in data.textures" :key="index">{{item.textureName}}</div>
    </div>
    <div class="detail-type-title-two"><div class="detail-type-title-left"></div>日常指标:</div>
    <div class="detail-table">
      <div class="detail-table-one">
        <div class="detail-table-two-t" v-for="(item, index) in data.indicators" :key="index">{{item.indicatorName}}:</div>

      </div>
      <div class="detail-table-two">
        <div class="detail-table-two-t" v-for="(item, index) in data.indicators" :key="index">{{item.threshold}}</div>

      </div>

    </div>
    <div class="detail-type">
      <div class="detail-type-title"><div class="detail-type-title-left"></div>日常饲料:</div>
      <span v-for="(item, index) in data.fodders">{{item.fodderName}} <span v-if="index <= data.fodders.length -2">、</span></span>
    </div>
    <div class="detail-type-title-two"><div class="detail-type-title-left"></div>设备情况:</div>
    <div class="detail-facillty" v-for="(item, index) in data.equipments" :key="index">
      <div>{{item.equipmentName}}</div>
      <div class="detail-facillty-line"></div>
      <div>
        <div v-if="item.equipmentState == 0">正常</div>
        <div v-else>异常</div>
      </div>
    </div>
  <!--  <div class="detail-facillty">
      <div>设备名称1</div>
      <div class="detail-facillty-line"></div>
      <div>设备状态</div>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    data: Object
  },
  data () {
    return {

    }
  },

  methods: {

  }
}
</script>

<style scoped>
.detail-detail{
  margin-top: 56px;
  border-top: 1px solid #e5e5e5;
  padding: 29px;
}
.detail-type{
  display: flex;
  align-items: center;
  color: #4d4d4d;
  font-size: 26px;

}
.detail-type-title{
  font-size: 32px;
  color: #2f2f2f;
  font-weight: bold;
  display: flex;
  margin-right: 22px;

}
.detail-type-title-two{
  font-size: 32px;
  color: #2f2f2f;
  font-weight: bold;
  display: flex;
  margin-right: 22px;
  margin-top: 37px;
  margin-bottom: 32px;
}
.detail-table{
  font-size: 26px;
  border: 2px solid #e5e5e5;
  margin-bottom: 53px;
  /* opacity: 0.14; */
}
.detail-table-two{
  display: flex;
  background: #f7f7f7;
}
.detail-table-one{
  background: #fff;
  display: flex;
  line-height: 69px;
}
.detail-table-two-t{
  width: 33%;
  text-align: center;
  line-height: 54px;
}
.detail-facillty{
  display: flex;
  font-size: 29px;
  padding: 18px 39px;
  border-radius:10px;
  background: #f7f7f7;
  margin-bottom: 16px;
}
.detail-facillty-line{
  margin-left: 54px;
  margin-right: 67px;
  width: 2px;
  background: #dfdfdf;
}
.detail-type-con{
  background: #f7f7f7;
  padding: 15px 22px;
  color: #4d4d4d;
  margin-right: 16px;
}
.detail-type-title-left{
  width:8px;
  height:36px;
  background:linear-gradient(35deg,rgba(0,186,255,1),rgba(11,155,238,1));
  border-radius:4px;
  margin-right: 14px;
}
</style>
